<!-- 不是渲染引擎渲染时 -->
<template>
  <div class="mainPage-container">
    <div class="main-header">顶部</div>
    <div class="main-content">
      <!-- 1.组件库 -->
      <div class="main-content-left">
        <p class="stack-title">物料堆</p>
        <!-- 1.1原生拖拽 -->
        <ul v-for="(item, index) in stacks" :key="index">
          <li class="stack-item" :draggable="true" @drag="handleDrag(item)">
            {{ item }}
          </li>
        </ul>
      </div>
      <!-- 2.主舞台 -->
      <div class="main-content-center" @dragover.prevent @drop="handleDrop">
        <li v-for="(item, index) in componentArr" :key="index">
          <component :is="components[item]" />
        </li>
      </div>
      <!-- 3.编辑面板 -->
      <div class="main-content-right">
        <div>
          <P>配置面板</P>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onBeforeMount } from "vue";
import { components, componentNames } from "@/components/index.js";

import { jsonSchema } from "./utils.js";

const stacks = ref(componentNames); // 需要加到配置系统中的组件
const componentArr = ref([]); // 主舞台显示的组件
const selectedType = ref([]); // 组件库中，当前选中类型
const currentJson = ref({}); // 当前操作的数组
const currentPickType = ref("cButton"); // 舞台中当前选中类型

onBeforeMount(() => {
  currentJson.value = jsonSchema.page;
});

// 拖动
function handleDrag(item) {
  selectedType.value = item;
}

// 放手
function handleDrop() {
  console.log(66);
  const _type = selectedType.value;
  componentArr.value.push(_type);
}

// 用户当前选中的节点
function handlePickType(type) {
  console.log(63, type);
  currentPickType.value = type;
}
</script>

<style lang="less" scoped>
.mainPage-container {
  height: 100vh;

  .main-header {
    height: 60px;
    padding: 0 20px;
    line-height: 60px;
    border: 1px solid #ececec;
  }

  .main-content {
    display: flex;
    height: calc(100% - 60px);

    .main-content-left {
      width: 200px;
      border: 1px solid #ececec;
    }

    .main-content-right {
      width: 200px;
      border: 1px solid #ececec;
    }

    .main-content-center {
      flex: 1;
      border: 1px solid #ececec;
    }

    // 组件库
    .stack-title {
      font-weight: bold;
      text-align: center;
      margin: 10px 0;
    }

    .stack-item {
      height: 40px;
      line-height: 40px;
      text-align: center;
      border: 1px solid #ececec;
      cursor: pointer;
    }

    .stack-item:hover {
      border: 1px solid #ccc;
    }
  }
}
</style>
